<template>
	<view class="">
		<view class="bg">
			<view class="banner">
				<!-- <view class="text">
					再生资源供应链
				</view> -->
				<img src="../../static/images/home-b.png" alt="" srcset="">
			</view>
			<view class="content">
				<view class="pad">
					<view class="con">
						<navigator url="../../pages/index/index">
							<view class="con-img">
								<view class="bg-img">
									<img src="../../static/images/home-c.png" alt="" srcset="" style="width: 50rpx;height: 42rpx;">
								</view>
								
								<view class="text">
									卖废品
								</view>
							</view>
						</navigator>
						<view class="con-img" @click="notPpened">
							<view class="bg-img">
								<img src="../../static/images/home-d.png" alt="" srcset="" style="width: 44rpx;height: 50rpx;">
							</view>
							
							<view class="text">
								鸡毛换糖
							</view>
						</view>
						<view class="con-img" @click="notPpened">
							<view class="bg-img">
								<img src="../../static/images/home-ee.png" alt="" srcset="" style="width: 50rpx;height: 50rpx;">
							</view>
							
							<view class="text">
								网络体系
							</view>
						</view>
					</view>
					<view class="con">
						<view class="con-img" @click="notPpened">
							<view class="bg-img">
								<img src="../../static/images/home-f.png" alt="" srcset="" style="width: 50rpx;height: 50rpx;">
							</view>
							
							<view class="text">
								行业资讯
							</view>
						</view>
						<view class="con-img" @click="notPpened">
							<view class="bg-img">
								<img src="../../static/images/home-h.png" alt="" srcset="" style="width: 48rpx;height: 50rpx;">
							</view>
							
							<view class="text">
								供求信息
							</view>
						</view>
						<view class="con-img" @click="notPpened">
							<view class="bg-img">
								<img src="../../static/images/home-g.png" alt="" srcset="" style="width: 50rpx;height: 47rpx;">
							</view>
							<view class="text">
								找企业
							</view>
						</view>
					</view>
					<view class="con" style="width: 58%;">
						<view class="con-img" @click="notPpened">
							<view class="bg-img">
								<img src="../../static/images/home-hh.png" alt="" srcset="" style="width: 50rpx;height: 39rpx;">
							</view>
							
							<view class="text">
								设备更新
							</view>
						</view>
						<!-- <view class="con-img" @click="notPpened">
							<view class="bg-img">
								<img src="../../static/images/home-ff.png" alt="" srcset="" style="width: 48rpx;height: 50rpx;">
							</view>
							
							<view class="text">
								碳汇交易
							</view>
						</view> -->
						<view class="con-img" @click="notPpened">
							<view class="bg-img">
								<img src="../../static/images/home-e.png" alt="" srcset="" style="width: 50rpx;height: 49rpx;">
							</view>
							
							<view class="text">
							     两网融合
							</view>
						</view>
						<!-- <view class="con-img">
							
						</view> -->
					</view>
				</view>

			</view>
			<view class="action">
				<view class="con">
					<img src="../../static/images/home-i.png" alt="">
					<view class="txt">
						公告
					</view>
					<uni-notice-bar scrollable color="#000000" :speed="20" background-color="#FFFFFF" single
						text="再生资源回收是提高资源利用率、治理污染、保护环境、建设资源节约型社会的重要途径，是实施可持续发展战略的重要组成部分"></uni-notice-bar>

				</view>
			</view>
			<view class="hot">
				<img src="../../static/images/home-j.png" alt="" srcset="">
				<view class="txt">
					热门版块
				</view>
			</view>
			<view class="bg-imgs">
				<navigator url="../../pages/index/index">
					<view class="bg-box1">
						<view class="flx">
							<img class="img1" src="../../static/images/home-k.png" alt="" srcset="">
							<view class="txt">
								卖废品
							</view>
							<img class="img2" src="../../static/images/home-l.png" alt="" srcset="">
						</view>
						<view class="shou">
							·&nbsp;线上预约呼叫回收
						</view>
						<view class="">

						</view>
					</view>
				</navigator>
				<view class="bg-box2" @click="notPpened">
					<view class="flx">
						<img class="img1" src="../../static/images/home-m.png" alt="" srcset="">
						<view class="txt">
							找企业
						</view>
						<img class="img2" src="../../static/images/home-l.png" alt="" srcset="">
					</view>
					<view class="shou">
						·&nbsp;做的好的网点或企业介绍
					</view>
					<view class="">

					</view>
				</view>
			</view>
			<view class="hot">
				<img src="../../static/images/home-j.png" alt="" srcset="">
				<view class="txt">
					热门资讯
				</view>
			</view>
			<view class="news">
				<view class="padd">
					<view class="box1">
						<view class="txt1">
							再生资源回收
						</view>
						<view class="txt2">
							再生资源回收以物资不断循环利用的经济发展模式，正在成为全球潮流。可持续发展的战略，得到大家一致同意。可持续发展就是，既符合当代人类的需求，又不致损害后代人满足其需求能力的发展，是我们在注意经济增长的数量，同时要注意追求经济增长的质量。主要的标志是资源能够永远利用，保持良好的生态环境。
						</view>
					</view>
					<view class="box2">
						<img src="../../static/images/home-p.png" alt="" srcset="">
					</view>
				</view>
				<view class="paddin">
					<view class="box1">
						<img src="../../static/images/home-q.png" alt="" srcset="">
						<view class="txt1">
							324
						</view>
					</view>
					<view class="txt2">
						2023-4-11 09:12
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			notPpened() {
				uni.showToast({
					title: '暂未开通,敬请期待',
					icon: 'none',
					duration: 2000
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background: #F1F4F9;

		height: 1650rpx;

		// padding-bottom: 30rpx;
		.bg {
			width: 100%;
			height: 200rpx;
			background: url('../../static/images/home-a.png') no-repeat;
			background-size: 100% 100%;

			// padding: 0 18rpx;
			.banner {
				padding: 27rpx 18rpx 10rpx 18rpx;
				text-align: center;
                
				.text {

					font-family: Source Han Sans SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #FFFFFF;
					padding-bottom: 53rpx;
				}

				img {
					width: 100%;
					height: 262rpx;
				}

			}

			.content {
				margin: 0 24rpx 30rpx 24rpx;
				background: #FFFFFF;
				border-radius: 15rpx;

				.pad {
					padding: 31rpx 66rpx 0 66rpx;

					.con {
						padding-bottom: 30rpx;
						display: flex;
						justify-content: space-between;

						.con-img {
							display: flex;
							// justify-content: center;
							flex-direction: column;
							align-items: center;
                            
							.bg-img{
								display: flex;
								justify-content: center;
								align-items: center;
								width: 90rpx;
								height: 90rpx;
								background-color: rgb(241,234,225);
								border-radius: 15rpx;
								// img {
								// 	width: 45rpx;
								// 	height: 50rpx;
								// 	z-index: 9999999999999;
								// }
							}
							

							.text {
								margin-top: 9rpx;
								font-family: Source Han Sans SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #000000;
								opacity: 0.45;
							}
						}
					}
				}

			}

			.action {
				margin: 0 24rpx;
				background: #FFFFFF;
				border-radius: 15rpx;

				.con {
					padding: 22rpx 0 21rpx 30rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;

					img {
						width: 32rpx;
						height: 27rpx;
						padding-right: 12rpx;
					}

					.txt {
						width: 100rpx;
						height: 30rpx;
						line-height: 30rpx;
						font-family: Source Han Sans SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #000000;
						opacity: 0.85;
						border-right: 1rpx solid #EBEBEB;
					}
				}
			}

			.hot {
				margin: 29rpx 0 25rpx 29rpx;
				display: flex;
				align-items: center;

				img {
					width: 8rpx;
					height: 28rpx;
					padding-right: 20rpx;
				}

				.txt {
					font-family: Source Han Sans SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
					opacity: 0.85;
				}
			}

			.bg-imgs {
				margin: 0 24rpx 29rpx 24rpx;
				display: flex;
				justify-content: space-between;

				.pad {
					// margin: 79rpx 12rpx  24rpx 12rpx;
				}

				.bg-box1 {
					width: 340rpx;
					height: 190rpx;
					background: url('../../static/images/home-z.png');
					background-size: 100% 100%;

					// padding: 79rpx 12rpx  24rpx 12rpx;
					// padding: 0rpx 12rpx  0rpx 12rpx;
					.flx {
						display: flex;
						align-items: center;

						// justify-content: space-around;
						.img1 {
							width: 50rpx;
							height: 44rpx;
							margin: 79rpx 11rpx 23rpx 12rpx;
							// margin-left: ;
						}

						.txt {
							width: 96rpx;

							font-family: Source Han Sans SC;
							font-weight: bold;
							font-size: 32rpx;
							color: #FFFFFF;
							// margin: 79rpx 147rpx 23rpx 0;
							margin-top: 56rpx;
							margin-right: 147rpx;
						}

						.img2 {
							width: 12rpx;
							height: 24rpx;
							margin-top: 56rpx;

						}
					}

					.shou {


						font-family: Source Han Sans SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #FFFFFF;
						margin-left: 12rpx;
					}
				}

				.bg-box2 {
					width: 340rpx;
					height: 190rpx;
					background: url('../../static/images/home-z.png');
					background-size: 100% 100%;

					// padding: 79rpx 12rpx  24rpx 12rpx;
					// padding: 0rpx 12rpx  0rpx 12rpx;
					.flx {
						display: flex;
						align-items: center;

						// justify-content: space-around;
						.img1 {
							width: 50rpx;
							height: 44rpx;
							margin: 79rpx 11rpx 23rpx 12rpx;
							// margin-left: ;
						}

						.txt {
							width: 96rpx;

							font-family: Source Han Sans SC;
							font-weight: bold;
							font-size: 32rpx;
							color: #FFFFFF;
							// margin: 79rpx 147rpx 23rpx 0;
							margin-top: 56rpx;
							margin-right: 147rpx;
						}

						.img2 {
							width: 12rpx;
							height: 24rpx;
							margin-top: 56rpx;

						}
					}

					.shou {
						font-family: Source Han Sans SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #FFFFFF;
						margin-left: 12rpx;
					}
				}
			}

			.news {
				margin: 24rpx;
				padding-bottom: 30rpx;
				background-color: #FFFFFF;
				border-radius: 15rpx;

				.padd {
					padding: 30rpx 30rpx 18rpx 28rpx;
					display: flex;

					.box1 {
						.txt1 {

							font-family: Source Han Sans SC;
							font-weight: bold;
							font-size: 36rpx;
							color: #000000;
							opacity: 0.85;
							margin-bottom: 22rpx;
						}

						.txt2 {
							width: 90%;
							font-family: Source Han Sans SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #000000;
							opacity: 0.45;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							/*控制在3行*/
							-webkit-line-clamp: 3;
							-webkit-box-orient: vertical;
						}
					}

					.box2 {
						img {
							width: 160rpx;
							height: 160rpx;
						}
					}
				}

				.paddin {
					padding: 0 30rpx;
					display: flex;

					justify-content: space-between;

					.box1 {
						display: flex;
						align-items: center;

						img {
							width: 24rpx;
							height: 22rpx;
							padding-right: 7rpx;
						}

						.txt1 {

							font-family: Source Han Sans SC;
							font-weight: 400;
							font-size: 20rpx;
							color: #000000;
							opacity: 0.45;
						}
					}

					.txt2 {



						font-family: Source Han Sans SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #000000;

						opacity: 0.45;
					}
				}
			}
		}
	}

	.uni-noticebar {
		padding: 0;
		margin: 0;
		margin-left: 29rpx;
	}
</style>